<template>
  <div>
    <MBX Biao="商品管理" Biao1="商品分类"></MBX>

    <el-card class="mt">
      <el-button type="primary" class="mt">添加分类</el-button>

      <tree-table
        class="mt"
        :data="tableData1"
        :columns="columns"
        :selection-type="false"
        :expand-type="false"
        show-index
        index-text="#"
        border
        :show-row-hover="false"
        style="margin-top: 15px"
      >
        <template slot="isok" slot-scope="scope">
          <i
            class="el-icon-success"
            v-if="scope.row.cat_deleted === false"
            style="color: lightgreen"
          ></i>
          <i class="el-icon-error" v-else style="color: red"></i>
        </template>

        <template slot="order" slot-scope="scope">
          <el-tag size="mini" v-if="scope.row.cat_level === 0">一级</el-tag>
          <el-tag type="success" size="mini" v-else-if="scope.row.cat_level === 1"
            >二级</el-tag
          >
          <el-tag type="warning" size="mini" v-else>三级</el-tag>
        </template>

        <template slot="opt">
          <el-button type="primary" icon="el-icon-edit" size="mini">编辑</el-button>
          <el-button type="danger" icon="el-icon-delete" size="mini">删除</el-button>
        </template>
      </tree-table>

      <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="querInfo.pagenum"
      :page-sizes="[5,7,9]"
      :page-size="querInfo.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
      <!--  -->
    </el-card>
  </div>
</template>

<script>
import { getgoodscategoriesApi } from "@/http/api";
export default {
  data() {
    return {
      tableData1: [],
      querInfo: {
        type: 3,
        pagenum: 1,
        pagesize: 5,
      },
      total: 0,
      columns: [
        {
          label: "分类名称",
          prop: "cat_name",
        },
        {
          label: "是否有效",
          type: "template",
          template: "isok",
        },
        {
          label: "排序",
          type: "template",
          template: "order",
        },
        {
          label: "操作",
          type: "template",
          template: "opt",
        },
      ],
    };
  },
  created() {
    this.getlist();
  },
  components: {},
  mounted() {},
  methods: {
    handleSizeChange(val){
        console.log(val);
        this.querInfo.pagesize=val
        this.getlist()
    },
    handleCurrentChange(val){
        console.log(val);
        this.querInfo.pagenum=val
         this.getlist()
    },  
    getlist() {
      getgoodscategoriesApi(this.querInfo).then((res) => {
        console.log('数据渲染',res);
        this.total=res.total
        this.tableData1= res.result;
      });
    },
  },
};
</script>

<style scoped></style>
